﻿
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Angular: PubNub Chat - jsFiddle demo by nolandubeau</title>
  
  <script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>
  
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
    
    
      <script type='text/javascript' src="http://code.angularjs.org/angular-1.0.0rc7.js"></script>
    
  
    
      <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
    
    
  
  <style type='text/css'>
    html,body{
    background-color:#fff;
}

#logo{
    margin-bottom:15px;
}

#chat{
    padding:20px;
    width:300px;
    margin:0 auto 0 auto;
}

.clearfix{
    margin-bottom:10px;
}

#messages div.message {
    border-bottom: solid #eee 1px;
    padding: 0.7em;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    height: 58px;
}

#messages div.message p {
    margin: 0.2em;
    padding: 0;
    color: #333;
}

#messages div.message p.user {
    font-weight: bold;
}

#messages .avatar-frame {
    float: left;
    margin-right: 10px;
    padding: 0px;
    border: 1px solid #eee;
}

#messages .avatar-frame, .avatar-frame img {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 10px; /* Saf3+, Chrome */
    border-radius: 10px; /* Opera 10.5, IE 9 */
    /*-moz-border-radius: 30px; Disabled for FF1+ */
    float: left;
    margin-right: 14px;
}

label {
    font-weight: bold;
}

.well, #progress_bar {
    border-radius: 0;
    margin-top: 0;
}

.bar, #progress_bar {
    width: 100%;
    margin-bottom: 0;
}
  </style>
  
</head>
<body ng-app="PubNubChat">
  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<div pub-key="pub-8e474368-7add-4283-9b87-caf9efbcdedc" sub-key="sub-1ffec1f3-9463-11e1-9376-77819258e702" ssl="off" origin="pubsub.pubnub.com" id="pubnub"></div>
<script src="http://cdn.pubnub.com/pubnub-3.1.min.js"></script>

<div ng-controller="MyCtrl">
    <div class="progress progress-danger progress-striped" id="progress_bar">
        <div class="bar" style="width: 100%;">
        </div>
    </div>
    
    <div id="chat">
        <img ng-src="https://pubnub.s3.amazonaws.com/2012/pubnub-large.png" alt="PubNub" id="logo"/><br/>
        <b>Status: {{realtimeStatus}} </b>
        <form class="form-horizontal">
          
            <input placeholder="מה קורה" type="text" name="username" ng-model="message.username"/>
            <div class="clearfix"></div>
            <input placeholder="What's on your mind?" type="text" name="text" ng-model="message.text"/>
            <button type="submit" ng-click="publish()" class="btn btn-danger">
                Send
            </button>
        </form>
        <hr/><!-- Message List -->
        <div id="messages" class="table-striped">
            <div class="message" ng-repeat="message in messages" cool-fade>
                <div class="avatar-frame">
                    <img ng-src="https://www.guardly.com/commonassets/images/img_profile_placeholder.png" class="avatar avatar-60 photo" height="60" width="60"/>
                </div>
                <p class="user">
                    {{message.username}} said:
                </p>
                <p class="text">
                    {{message.text}}
                </p>
            </div>
        </div>
  


<script type='text/javascript'>//<![CDATA[ 

var myApp = angular.module('PubNubChat', []).directive('coolFade', function() {
    return {
        compile: function(elm) {
            //console.log('compiling');
            $(elm).css('opacity', 0);
            return function(scope, elm, attrs) {
                // console.log('animating');
                $(elm).animate({
                    opacity: 1.0
                }, 1000);
            };
        }
    };
});


//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {

    $scope.messages = [];
    $scope.realtimeStatus = "Connecting...";
    $scope.channel = "pubnub_chat";
    $scope.limit = 20;

    //publish a chat message
    $scope.publish = function() {

        //toggle the progress bar
        $('#progress_bar').slideToggle();

        PUBNUB.publish({
            channel: $scope.channel,
            message: $scope.message
        });

        //reset the message text
        $scope.message.text = "";
    };

    //gets the messages history   
    $scope.history = function() {
        PUBNUB.history({
            channel: $scope.channel,
            limit: $scope.limit
        }, function(messages) {
            // Shows All Messages
            $scope.$apply(function() {
                $scope.messages = messages.reverse();

            });
        });
    };


    //we'll leave these ones as is so that pubnub can
    //automagically trigger the events
    PUBNUB.subscribe({
        channel: $scope.channel,
        restore: false,

        callback: function(message) {

            //toggle the progress_bar
            $('#progress_bar').slideToggle();

            $scope.$apply(function() {
                $scope.messages.unshift(message);

            });
        },

        disconnect: function() {
            $scope.$apply(function() {
                $scope.realtimeStatus = 'Disconnected';
            });
        },

        reconnect: function() {
            $scope.$apply(function() {
                $scope.realtimeStatus = 'Connected';
            });
        },

        connect: function() {
            $scope.$apply(function() {
                $scope.realtimeStatus = 'Connected';
                //hide the progress bar
                $('#progress_bar').slideToggle();
                //load the message history from PubNub
                $scope.history();
            });

        }
    });


}
//]]>  

</script>


</body>


</html>

